<template>
  <div class="container clearfix">
    <form
      action=""
      class="filter"
    >
      <h2 class="title">
        筛选查询
      </h2>
      <div class="section">
        <span class="tip">
          项目名称
        </span>
        <div class="content">
          <el-input
            v-model="search_form.project_name"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          分类
        </span>
        <el-select
          v-model="search_form.cate_id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in class_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="section">
        <span class="tip">
          医院名称
        </span>
        <div class="content">
          <el-input
            v-model="search_form.hos_name"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          团长姓名
        </span>
        <div class="content">
          <el-input
            v-model="search_form.leader_name"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          用户类型
        </span>
        <el-select
          v-model="search_form.user_type"
          placeholder="请选择"
        >
          <el-option
            v-for="item in user_type_arr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="btn-bar">
        <el-button
          type="primary"
          siae="small"
          icon="el-icon-search"
          @click="search()"
        >查询结果</el-button>
      </div>
    </form>
    <div class="data-table">
      <el-table
        :data="tableData"
        :loading="table_loading"
        border
        height="660"
        style="width: 100%"
      >
        <el-table-column
          prop="groupId"
          align="center"
          label="拼团编号"
        />
        <el-table-column
          prop="projectName"
          align="center"
          label="项目名称"
        />
        <el-table-column
          prop="hospitalName"
          align="center"
          label="医院名称"
        />
        <el-table-column
          prop="payAmount"
          align="center"
          label="支付金额"
        />
        <el-table-column
          prop="groupHeadName"
          align="center"
          label="团长姓名"
        />
        <el-table-column
          prop="groupHeadType"
          align="center"
          label="用户类型"
        />
        <el-table-column
          prop="groupHeadPhone"
          align="center"
          width="120"
          label="团长手机号"
        />
        <el-table-column
          prop="groupCreateTime"
          align="center"
          width="200"
          label="开团时间"
        />
        <el-table-column
          prop="groupSize"
          align="center"
          label="成团人数"
        />
        <el-table-column
          prop="groupNum"
          align="center"
          label="已参团人数"
        />
        <el-table-column
          prop="statusStr"
          align="center"
          label="拼团状态"
        />
        <el-table-column
          prop="remaining_time"
          align="center"
          width="200"
          label="剩余结束时间"
        />
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="search_detail(scope.row)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-controller">
      <!-- <el-pagination layout="prev, pager, next"
                     :hide-on-single-page="true"
                     @current-chang="change_page"
                     :total="page_total">
      </el-pagination> -->
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>
  import { getCateDownList } from '../../api/category'
import { getGroupList } from '../../api/group'

export default {
  data() {
    return {
      input: '',
      user_type_arr: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 0,
          label: '普通用户'
        },
        {
          value: 1,
          label: '会员'
        },
        {
          value: 2,
          label: '系统用户'
        }
      ],
      value: '',
      tableData: [],
      class_arr: [],
      hos_arr: [],
      page: 1,
      pageSize: 10,
      page_total: 1,
      data_total: 0,
      table_loading: false,
      search_form: {
        //   项目名称
        project_name: '',
        //   分类
        cate_id: '',
        //   医院名称
        hos_name: '',
        //   团长名
        leader_name: '',
        //   用户类型
        user_type: -1
      },
      model: 0// 0 初次加载   1表示条件筛选
    }
  },
  created() {
    this.get_list()
    this.get_catelist()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.get_list()
    },
    handleCurrentChange(val) {
      this.page = val
      this.get_list()
    },
    search_detail(row) {
      // 查看详情
      this.$router.push({
        path: '/group_detail',
        query: {
          id: row.groupId
        }
      })
    },
    // 获取列表
    get_list(options = {
      pageNum: this.page,
      pageSize: this.pageSize,
      projectName: this.search_form.project_name,
      projectCategoryId: this.search_form.cate_id - 0,
      groupHeadName: this.search_form.leader_name,
      groupHeadType: this.search_form.user_type,
      hospitalName: this.search_form.hos_name
    }) {
      if (this.model === 0) {
        options = {
          pageNum: this.page,
          pageSize: this.pageSize
        }
      }
      this.table_loading = true
      getGroupList(options).then((result) => {
        this.table_loading = false
        const res = result.data
        if (res.code === 0) {
          if (res.data.list && res.data.list.length > 0) {
            res.data.list.forEach(val => {
              const now_time = new Date().getTime()
              const end_time = val.groupEndTime - now_time
              if (end_time > 0) {
                // 计算出相差天数
                const days = Math.floor(end_time / (24 * 3600 * 1000))
                // 计算出小时数
                const leave1 = end_time % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
                const hours = Math.floor(leave1 / (3600 * 1000))
                // 计算相差分钟数
                const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
                const minutes = Math.floor(leave2 / (60 * 1000))
                // 计算相差秒数
                const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
                const seconds = Math.round(leave3 / 1000)
                val.remaining_time = `剩余 ${hours}小时${minutes}分钟${seconds}秒`
              } else {
                val.remaining_time = ''
              }
            })
          }
          this.data_total = res.data.count
          this.page_total = Math.ceil(res.data.count / this.pageSize)

          this.tableData = res.data.list
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.table_loading = false
        this.$message.error(err)
      })
    },
    // 获取分类列表
    get_catelist() {
      getCateDownList( {
        'pageNum': 1,
        'pageSize': 1000
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          const arr = []
          res.data.list.forEach(item => {
            arr.push({
              value: item.id,
              label: item.categoryName
            })
          })
          this.class_arr = arr
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 搜索
    search() {
      const form_data = this.search_form
      this.model = 1
      this.get_list({
        pageNum: this.page,
        pageSize: this.pageSize,
        projectName: form_data.project_name,
        projectCategoryId: form_data.cate_id - 0,
        groupHeadName: form_data.leader_name,
        groupHeadType: form_data.user_type,
        hospitalName: form_data.hos_name
      })
    },
    change_page(page) {
      this.page = page
      this.get_list()
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .filter {
    margin: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    .title {
      font-size: 16px;
    }
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: 16px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .btn-bar {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .page-controller {
    float: right;
    margin-right: 20px;
  }
}
</style>

